<template>
    <div class="chart-container">
        <h3 class="chart-title">{{data.options.title}}</h3>
        <el-progress :percentage="percentage" :stroke-width="Number(data.options.strokeWidth)" :color="data.options.customColor"></el-progress>
    </div>
</template>

<script>
import {getNewEcharts} from '@/api/api'
import echart from '@/mixins/echart'
import { mapGetters } from 'vuex'
export default {
    name: 'HxprogressEchart',
    mixins: [echart],
    created(){
        setTimeout(function(){
            this.percentage = this.data.options.percentage
        }.bind(this),300)
    },
    data() {
        return {
            percentage: 0
        }
    },
    watch: {
        echartColors: {
            handler(newColors,oldColors) {
                this.data.options.customColor = newColors[0]
            },
            deep: true
        }
    },
    methods: {
        _getNewEcharts(){
            const parms = {
                echartType:"pie",
                sourceId:this.data.options.sourceId
            }
            getNewEcharts(parms).then(res=>{
                if(res.rcode=='0000'){
                    this.data.options.series[0].data = res.data.seriesData
                    this.data.options.legend.data = res.data.legendData
                    
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .chart-title{
        color: #666;
        font-size: 14px;
    }
</style>
